<template>
  <div id="personal_manage">
    <div id="upload_box">
      <el-upload
        class="upload-demo"
        :action= "upload_url"
        :headers="importHeaders"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="onSuccess"
        :on-error="onError"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-upload>
    </div>
    <div id="table_box">
      <el-table
        border
        stripe
        v-loading="loading"
        :data="tableData"
        :height="clientHeight"
        style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          fixed
          prop="fullName"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="ethnicity"
          label="民族">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="politicalOutlook"
          label="政治面貌">
        </el-table-column>
        <el-table-column
          prop="iDCard"
          label="身份证">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话">
        </el-table-column>

        <el-table-column
          prop="birthDate"
          label="出生日期">
        </el-table-column>
        <el-table-column
          prop="birthPlace"
          label="出生地点">
        </el-table-column>
        <el-table-column
          prop="nativePlace"
          label="籍贯">
        </el-table-column>
        <el-table-column
          prop="homeAddress"
          label="家庭住址">
        </el-table-column>
        <el-table-column
          prop="communityGroup"
          label="所属社区">
        </el-table-column>
        <el-table-column
          prop="registeredResidence"
          label="户口所在地">
        </el-table-column>

        <el-table-column
          prop="disciplines"
          label="学科">
        </el-table-column>
        <el-table-column
          prop="gradeGroup"
          label="年级组">
        </el-table-column>
        <el-table-column
          prop="jobClassification"
          label="岗位类型">
        </el-table-column>
        <el-table-column
          prop="establishmentType"
          label="编制类型">
        </el-table-column>
        <el-table-column
          prop="post"
          label="职务">
        </el-table-column>
        <el-table-column
          prop="putonghuaLevel"
          label="普通话等级">
        </el-table-column>
        <el-table-column
          prop="putonghuaLevelTime"
          label="获得时间">
        </el-table-column>
        <el-table-column
          prop="starWorkDate"
          label="开始工作时间">
        </el-table-column>
        <el-table-column
          prop="teacherQualification"
          label="教师资格">
        </el-table-column>
        <el-table-column
          prop="teacherQualificationTime"
          label="获得时间">
        </el-table-column>
        <el-table-column
          prop="title"
          label="职称">
        </el-table-column>
        <el-table-column
          prop="titleLevel"
          label="职级">
        </el-table-column>

        <el-table-column
          prop="firstDegree"
          label="第一学历">
        </el-table-column>
        <el-table-column
          prop="firstGraduateSchool"
          label="第一毕业院校">
        </el-table-column>
        <el-table-column
          prop="firstMajor"
          label="第一学历主修">
        </el-table-column>
        <el-table-column
          prop="highestDegree"
          label="最高学位">
        </el-table-column>
        <el-table-column
          prop="highestGraduateSchool"
          label="最高学位学校">
        </el-table-column>
        <el-table-column
          prop="highestMajor"
          label="最高学历主修">
        </el-table-column>
        <el-table-column
          prop="mhkLevel"
          label="mhk等级">
        </el-table-column>
        <el-table-column
          prop="mhkLevelTime"
          label="获取时间">
        </el-table-column>

        <el-table-column
          prop="commitWord"
          label="备注">
        </el-table-column>
      </el-table>
    </div>
    <div id="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_params.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page_params.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page_params.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
    import {selectAllMessage} from '@/api/personalMenu'
    export default {
        data() {
            return {
                tableData: [],
                page_params: {
                    pageNum: 1,
                    pageSize: 20,
                    total: 100
                },
                loading: false,
                clientHeight: '520',
                upload_url: process.env.VUE_APP_BASE_API + '/personalmessage/insertMessage',
                importHeaders: {token: window.sessionStorage.getItem('token')},
                fileList: [],
            };
        },
        methods: {
          refresh_data(){
              this.loading = true;
              selectAllMessage(this.page_params).then((res) => {
                  if (res.code != "200") {
                      this.$message({
                          message: res.data.msg,
                          type: 'warning'
                      });
                  }else{
                      this.tableData = res.data.object;
                  }
                  this.loading = false;
              }).catch(() => {
                  this.loading = false;
              })
          },
          handleSizeChange(val) {
              this.page_params.pageNum = 1;
              this.page_params.pageSize = val;
              this.refresh_data();
          },
          handleCurrentChange(val) {
              this.page_params.pageNum = val;
              this.refresh_data();
          },
          handleRemove(file, fileList) {
              console.log("123");
          },
          handlePreview(file) {
              console.log("456");
          },
          handleExceed(files, fileList) {
              this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
              return this.$confirm(`确定移除 ${ file.name }？`);
          },
          onSuccess(){
              this.$message({
                  message: '上传成功',
                  type: 'success'
              });
          },
          onError(){
              this.$message.error('上传失败');
          },
        },
        created(){
            this.clientHeight = document.body.clientHeight - 190;
            this.refresh_data();
        }
    }
</script>
<style lang="scss">
  #personal_manage {
    #upload_box {
      margin: 10px;
      width: 600px;
    }
    #table_box {
      margin: 10px;
    }
    #page_box {
      text-align: center;
      margin: 10px;
    }
  }
</style>
